<script setup>
import {onMounted, ref} from 'vue';
import icon from "../components/icon.vue"
import {get, post} from "../js/http.js";
const emit = defineEmits(['tab', "logout"])
const tabIndex = ref(0)
const realLog = ref([])
const isActiveParam = ref(false)
const isActiveLog = ref(false)
const systemParams = ref([])
const props = defineProps({
  isLogin: {
    type: Boolean,
    required: true,
    default: false
  },
});

function tabChange(index) {
  tabIndex.value = index
  emit("tab", index)
}
function toggleLog() {

  isActiveLog.value = !isActiveLog.value

}
function toggleParam() {
  if(isActiveParam.value==false){
    getParam()
  }
  isActiveParam.value = !isActiveParam.value
}
function logout() {
  localStorage.clear()
  emit("logout")
}

async function getParam() {
  get("/admin/getParam").then(res => {
    systemParams.value = res.result
  }).catch(error => console.log(error))
}
async function saveParam() {
  let res = await post("/admin/saveParam", systemParams.value)
  if (res.success) {
    window.message("保存成功", 'success')
  } else {
    window.message(res.message, 'warning')
  }
  toggleParam()
}
/*
var ws = new WebSocket("/ws/admin");

//当WebSocket创建成功时，触发onopen事件
ws.onopen = function(){

  // 复杂的数据结构，在通过连接发送之前，必须进行序列化。
  const json = JSON.stringify({
    type: 'keepalive',
    id: ''
  });
  ws.send(json); //将消息发送到服务端
}

//当客户端收到服务端发来的消息时，触发onmessage事件
ws.onmessage = function(e){
  //e.data 的数据格式也是字符串，手动解析这些数据才能得到其他格式的数据。
  const _data = JSON.parse(e.data);
  if (_data.type == 'log'){
    realLog.value.push(_data)
  }
}

//当客户端收到服务端发送的关闭连接请求时，触发onclose事件
ws.onclose = function(e){

}

//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e){

}
*/

</script>
<template>
  <div class="hero is-link" style="border-radius:5px">
    <div class="navbar-menu" v-if="isLogin==true">
      <div class="navbar-end">
        <a class="navbar-item" @click="toggleParam"><icon icon="setting" :size="16" class="mr-1"></icon>系统参数 </a>
        <a class="navbar-item" @click="toggleLog"><icon icon="comment" :size="16" class="mr-1"></icon>实时日志 </a>
        <a class="navbar-item" @click="logout"> 退出 </a>
      </div>
    </div>

    <div class="hero-body has-text-centered">
      <p class="title"> <icon icon="lucene" color="#fff" :size="32"></icon> Search Server</p>
      <p class="subtitle">基于Lucene8，快速 高效本地化搜索引擎</p>
    </div>
    <div class="hero-foot" v-if="isLogin==true">
      <nav class="tabs is-boxed is-fullwidth has-text-centered">
        <div class="container">
          <ul>
            <li :class="[tabIndex==0 ? 'is-active':'']"><a @click="tabChange(0)"><icon icon="data-view" :size="18" class="mr-1"></icon>运行统计</a></li>
            <li :class="[tabIndex==1 ? 'is-active':'']"><a @click="tabChange(1)"><icon icon="modular" :size="18" class="mr-1"></icon>索引设置</a></li>
            <li :class="[tabIndex==2 ? 'is-active':'']"><a @click="tabChange(2)"><icon icon="calendar" :size="18" class="mr-1"></icon>任务设置</a></li>
            <li :class="[tabIndex==3 ? 'is-active':'']"><a @click="tabChange(3)"><icon icon="shujuku" :size="18" class="mr-1"></icon>数据源</a></li>
            <li :class="[tabIndex==6 ? 'is-active':'']"><a @click="tabChange(7)"><icon icon="cdc" :size="18" class="mr-1"></icon>CDC</a></li>
            <!--li :class="[tabIndex==6 ? 'is-active':'']"><a @click="tabChange(6)"><icon icon="adjust" :size="18" class="mr-1"></icon>Canal</a></li!-->
            <li :class="[tabIndex==4 ? 'is-active':'']"><a @click="tabChange(4)"><icon icon="history" :size="18" class="mr-1"></icon>任务日志</a></li>
            <li :class="[tabIndex==8 ? 'is-active':'']"><a @click="tabChange(8)"><icon icon="layers" :size="18" class="mr-1"></icon>浏览数据</a></li>
            <li :class="[tabIndex==5 ? 'is-active':'']"><a @click="tabChange(5)"><icon icon="user" :size="18" class="mr-1"></icon>用户管理</a></li>
          </ul>
        </div>
      </nav>
    </div>
  </div>

  <div class="modal is-active" v-show="isActiveLog">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title" @click="toggleLog()">实时日志</p>
        <button class="delete" aria-label="close" @click="toggleLog()"></button>
      </header>
      <section class="modal-card-body">
        <template v-for="item in realLog">
          <span class="tag is-link is-light mr-4">{{item.date}}</span> <span>{{item.message}}</span><br />
        </template>
      </section>
      <footer class="modal-card-foot">
        <div class="buttons">
          <button class="button" @click="toggleLog()">Close</button>
        </div>
      </footer>
    </div>
  </div>
  <div class="modal is-active" v-show="isActiveParam">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title" @click="toggleParam()">系统参数</p>
        <button class="delete" aria-label="close" @click="toggleParam()"></button>
      </header>
      <section class="modal-card-body">
        <div class="field"  v-for="item in systemParams">
          <label class="label">{{item.param}}</label>
          <div class="control">
            <input v-model="item.value" class="input is-link" placeholder="" type="text">
          </div>
          <span class="help is-success">{{ item.remark }}</span>
        </div>
      </section>
      <footer class="modal-card-foot is-flex is-justify-content-flex-end">
        <div class="buttons">
          <button class="button" @click="toggleParam()">关闭</button>
          <button class="button is-link" @click="saveParam">保存</button>
        </div>
      </footer>
    </div>
  </div>
</template>
<style scoped>
</style>
